<%@ page contentType="text/html; charset=utf-8" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" 
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>list.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/jsp/common/include.base.jsp"
%><%@ include file="/jsp/common/include.jqgrid.jsp" 
%><jsp:include page="/jsp/common/include.commoncode.jsp" flush="false"><jsp:param name="gp" value="1,2"/></jsp:include>
<style type="text/css">
    body, input, select, textareabutton { font-size: 12px !important; }
    
    button { font-size: 11px !important; }
    
    .ui-jqgrid .ui-jqgrid-view, 
    .ui-jqgrid .ui-jqgrid-view input, 
    .ui-jqgrid .ui-jqgrid-view select, 
    .ui-jqgrid .ui-jqgrid-view textarea, 
    .ui-jqgrid .ui-jqgrid-view button { font-size:12px !important; }
</style>
<script type="text/javascript">
var bulletinGb = <c:choose><c:when test="${param.bulletinGb} ne null">"${param.bulletinGb}"</c:when><c:otherwise>"notice"</c:otherwise></c:choose>;
//*************************************************************************
// 그리드 포멧터 - 시작
//*************************************************************************
function formatterTitle(value, option, row) {
	var lev = row[4];
	var html = "";
	
	if (lev > 1) {
		html += "<div style='margin-left:" + ((lev - 2) * 15) + "px;display:inline-block;' class='ui-icon ui-icon-arrowreturn-1-e'></div>";
	}
	html += "<a href='javascript:_edit(\"" + $.jgrid.htmlEncode(row[0]) + "\");'>" + $.jgrid.htmlEncode(value) + "</span>";
	
	return html;
// 	return $.jgrid.htmlEncode(html);
} 

function formatterAttachYn(value, option, row) {
    var html = "<span class='ui-icon ui-icon-disk' style='display:inline-block;'></span>";
    return html;
}
//*************************************************************************
//그리드 포멧터 - 종료
//*************************************************************************
function getGridPostData() {
	var data = {bulletinGb:bulletinGb, searchCol:$("#searchCol").val()};
	if ($("#searchVal").val()) { data.searchVal = "%" + $("#searchVal").val() + "%"; };
	return data;
}

$(function() {
    $("#list").jqGrid({
    	autoencode: true,
        url: "${pageContext.request.contextPath}/app/bulletin/list.json",
        datatype: "json",
        mtype: "post",
        postData: getGridPostData(),
        colNames: ["번호", "제목", "고정여부", "팝업공지여부", "표시레벨", "등록자", "등록일", "첨부여부"],
        colModel: [
            {name:"articleId", width:100, align:"center"},
            {name:"title", width:300, editable:true, formatter:formatterTitle},
//             {name:"title", width:300, editable:true},
            {name:"fixYn", hidden:true},
            {name:"popupYn", hidden:true},
            {name:"dispLevel", hidden:true},
            {name:"regUser", width:100, align:"center"},
            {name:"regDatetime", width:100, align:"center"},
            {name:"attachYn", width:50, align:"center", editable:true, formatter:formatterAttachYn}
        ],
        pager: "#pager",
        <c:if test="${param.page ne null and param.page ne ''}">
        page: ${param.page},
        </c:if>
        cmTemplate: {sortable:false}, // 정렬기능제거
        gridComplete: function() {
        	var data = $("#list").jqGrid("getRowData");
        	
        	for (var i = 0; data && i < data.length; i++) {
        		if (data[i].fixYn == "Y") {
        			// 게시물 상단에 표시되는 공지게시물의 바탕색을 회색으로 표시 
        			$("#" + data[i].articleId, $("#list")).removeClass("ui-widget-content").css("background-color", "silver");
        		}
        	}
        }
    });
    $("#list").jqGrid("setGridHeight", "400px");
    
    $("button").button();
});

function getBaseEditUrlParam() {
    var param = "?bulletinGb=" + bulletinGb + "&page=" + $("#list").jqGrid("getGridParam", "page");
    return param;
}

function _edit(articleId) {
    var url = "edit.jsp" + getBaseEditUrlParam() + "&articleId=" + articleId;
    document.location.href = url;
}

function _insert() {
    var url = "edit.jsp" + getBaseEditUrlParam();
    document.location.href = url;
}

function _list() {
	// getGridPostData()에 searchVal이 포함되어 있지 않다면, 이전 searchVal 항목이 계속 유지되어 사전에 제거
	delete $("#list").jqGrid("getGridParam", "postData").searchVal; 
	$("#list").jqGrid("setGridParam", {postData:getGridPostData()}).trigger("reloadGrid");
}
</script>
</head>
<body>
<div>
<button type="button" onclick="_insert();">작성</button><span style="float:right;"><select id="searchCol"><option value="title">제목</option><option value="content">내용</option><option value="userid">작성자</option></select><input id="searchVal" type="text"/><button type="button" onclick="_list();">검색</button></span>
</div>
<table id="list"><tr><td></td></tr></table><div id="pager"></div><br/>
</body>
</html>